<template>
  <div class="main_content">
    <div class="top_module">
      <div class="left">
        <div class="swiper">
          <mySwiper
            :slide-list="topNewsbanner"
            currentIndex="1"
            :prevNext="false"
          ></mySwiper>
        </div>
      </div>
      <div class="news">
        <ul>
          <li
            v-for="newItem in indexPageInfo.newsall"
            :key="newItem.pkid"
          >
            <span
              :title="newItem.title"
              class="title"
            >{{newItem.title}}</span> <span class="date">{{utils.formatDate(newItem.lurushijian)}}</span>
          </li>
        </ul>
        <div class="more">
          <button class="more_btn">
            查看更多》
          </button>
        </div>
      </div>
      <div class="card_box">
        <div v-if="loginStatusComputed">
          <div class="user_card">
            <div class="user_actor">
              <img
                :src="imgUrl+'/vuestatic/img/home/default_actor.jpg'"
                alt=""
              >
              <div class="user_company">
                <p class="welcome"><span>尊敬的</span> <span
                    class="realnameSpan"
                    :title="quickMsgResultInfo.realname"
                  >{{quickMsgResultInfo.realname}}</span> <span>用户，您好</span></p>
                <p class="link_company"><span>绑定企业：</span><span :title="quickMsgResultInfo.qiyename">{{quickMsgResultInfo.qiyename}}</span></p>
              </div>
            </div>
            <p class="message"><span>你有</span><span> {{ quickMsgResultInfo.message }} </span><span>条未读信息,请及时查收</span></p>
          </div>
          <div class="quckly_module">
            <div class="title">我的服务进度</div>
            <div class="module_btns">
              <div>
                <template v-for="item,index in quickBtns">
                  <button
                    class="quickBtn"
                    :key="index"
                  >{{item.meta.title +' '+quickMsgResult(item.meta.title) }}</button>
                </template>
              </div>
            </div>
          </div>
        </div>

        <div
          v-else
          class="unLoginCard"
          :style="'background-image:url('+imgUrl+'/vuestatic/img/home/logonUserInfo.png)'"
        >
          <div
            class="unlogin_logo"
            :style="'background-image:url('+imgUrl+'/vuestatic/img/home/logo.png)'"
          >
            <el-form
              :model="cardLoginForm"
              :rules="cardLoginFormRules"
              ref="cardLoginFormRules"
              label-width="100px"
              class="cardLoginFormRules"
            >
              <el-form-item prop="username">
                <el-input
                  type="text"
                  prefix-icon="el-icon-user"
                  placeholder="手机号"
                  v-model.number="cardLoginForm.username"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  type="password"
                  placeholder="密码"
                  prefix-icon="el-icon-unlock"
                  v-model="cardLoginForm.password"
                ></el-input>
              </el-form-item>
              <el-form-item prop="imgcode">
                <el-input
                  v-model="cardLoginForm.imgcode "
                  placeholder="验证码"
                ></el-input>
                <div
                  @click="getLoginCode"
                  v-if="!loginCode"
                  class="queryCode"
                >获取验证码</div>
                <div
                  v-if="loginCode"
                  class="codeItem"
                >
                  <img
                    @click="getLoginCode"
                    :src="loginCode"
                    alt=""
                    id="gain_login_img"
                  >
                </div>
              </el-form-item>
              <el-form-item class="cardLoginBtnBox">
                <!-- <el-button
                  type="primary"
                  @click="submitForm('cardLoginFormRules')"
                >提交</el-button> -->
                <button
                  class="logBtn"
                  @click="submitForm('cardLoginFormRules')"
                >登录</button>
                <button
                  class="signBtn"
                  @click="toReg"
                >注册</button>

              </el-form-item>
            </el-form>
          </div>
        </div>

      </div>
    </div>
    <!-- sqt_module -->
    <div
      class="sqt_module"
      id="sqt_module"
    >
      <div class="sqt_content">
        <div class="left">
          <div class="sqt_btn">
            <span class="title">诉求通</span>
            <div class="msg_total">
              <div class="finished">
                <p><span>{{indexPageInfo.stat.appealcount}}</span> 项</p>
                <p class="finished_floor2">已办诉求</p>
              </div>
            </div>
            <div class="moreBox">
              <button class="moreBtn">查看更多》</button>
            </div>
          </div>
          <div class="formDoor">
            <div class="sqt_tjsq"><span class="title">提交诉求</span></div>
            <div class="sqt_wdsq"><span class="title">我的诉求</span></div>
          </div>
        </div>
        <div class="right">
          <div class="info">
            <div class="content">
              <div class="info_header">
                <div class="title">诉求公开</div>
                <div class="date">2020年11月1日至2020年12月2日</div>
              </div>
              <div class="info_table">
                <myTable
                  :data="sqtTableHeader"
                  :dataTable="sqtTableData"
                ></myTable>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- zct_module -->
    <div class="zct_module">
      <div class="zct_content">
        <div class="left">
          <div class="zct_btn">
            <span class="title">政策通</span>
            <div class="msg_total">
              <div class="finished">
                <p><span>{{indexPageInfo.stat.policyfromcount}}</span> 项</p>
                <p class="finished_floor2">涉企政策</p>
              </div>
              <div class="ready">
                <p><span>{{indexPageInfo.stat.policycount}}</span> 项</p>
                <p class="ready_floor2">申报事项</p>
              </div>
            </div>
            <div class="moreBox">
              <button class="moreBtn">查看更多》</button>
            </div>
          </div>

        </div>
        <div class="right">
          <div class="info">
            <div class="content">
              <div class="info_header">
                <div class="title">最新申报</div>
                <div class="date">更多》</div>
              </div>
              <div class="info_table">
                <myTable :dataTable="zctTableData"></myTable>
              </div>

            </div>
          </div>
        </div>

        <div class="last">
          <div class="top">
            <p>活动日历</p>
          </div>
          <div class="bottom">
            <div class="info">
              <div class="content">
                <div class="info_header">
                  <div class="title">正在申报</div>
                  <div class="date">更多》</div>
                </div>
                <div class="info_table">
                  <myTable :dataTable="zctzTableData"></myTable>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- hdt_module -->
    <div class="hdt_module">
      <div class="hdt_content">
        <div class="left">
          <div class="hdt_btn">
            <span class="title">活动通</span>
            <div class="msg_total">
              <div class="finished">
                <p><span>{{indexPageInfo.stat.acticount}} </span>场</p>
                <p class="finished_floor2">活动已举办</p>
              </div>
              <div class="ready">
                <p><span>{{indexPageInfo.stat.actiholdcount}} </span>场</p>
                <p class="ready_floor2">活动报名中</p>
              </div>
            </div>
            <div class="moreBox">
              <button class="moreBtn">查看更多》</button>
            </div>
          </div>

        </div>
        <div class="right">
          <div class="hdt_date_quick">
            <div class="hdt_date_quick_img">
              <img
                :src="imgUrl+'/vuestatic/img/home/rl.png'"
                alt=""
              >
              <p>政策匹配</p>
            </div>
            <div class="bottom_word">
              <div class="top">
                <span>高新沙龙</span>
                <span>企业培训</span>
              </div>
              <div class="bottom">
                <span>融资服务</span>
                <span>科技创新</span>
              </div>

            </div>
          </div>

        </div>

        <div class="last">
          <!-- <div class="swiper">
            <img
              :src="imgUrl+'/vuestatic/img/home/peixunswiper.jpg'"
              alt=""
            >
          </div> -->
          <mySwiper
            :slide-list="hdtBanner"
            currentIndex="2"
            :prevNext="false"
          ></mySwiper>
        </div>
      </div>
    </div>

    <!-- sct_module -->
    <div class="sct_module">
      <div class="sct_content">
        <div class="left">
          <div class="sct_btn">
            <span class="title">市场通</span>
            <div class="msg_total">
              <div class="finished">
                <p><span>{{indexPageInfo.stat.bazrequirecount}}</span> 条</p>
                <p class="finished_floor2">对接需求</p>
              </div>
              <div class="ready">
                <p><span>{{indexPageInfo.stat.bazproductcount}}</span>个</p>
                <p class="ready_floor2">产品展示</p>
              </div>
            </div>
            <div class="moreBox">
              <button class="moreBtn">查看更多》</button>
            </div>
          </div>
          <div class="formDoor">
            <div class="sct_tjsq">
              <span class="title">需求发布</span>
              <span class="explain">服务资源、供需对接</span>

            </div>
            <div class="sct_wdsq">
              <span class="title">产品发布</span>
              <span class="explain">企业宣传、产品展示</span>
            </div>
          </div>
          <div class="sct_center_btn">
            <span class="title">服务超市</span>
            <div class="msg_total">
              <div class="finished">
                <p class="finished_floor2">服务精选、自助查看</p>
              </div>

            </div>
          </div>
        </div>
        <div class="right">
          <div class="info">
            <div class="content">
              <div class="info_header">
                <div class="title"><span
                    @click="sct_showTable_type='city'"
                    :class="sct_showTable_type==='city'?'on':''"
                  >城市机会清单</span><span
                    @click="sct_showTable_type='market'"
                    :class="sct_showTable_type==='market'?'on':''"
                  >市场机会清单</span></div>
                <div class="date">更多》</div>
              </div>
              <div class="info_table">
                <myTable
                  v-if="sct_showTable_type==='city'"
                  :dataTable="sctTableData_city"
                ></myTable>
              </div>
              <div class="info_table">
                <myTable
                  v-if="sct_showTable_type==='market'"
                  :dataTable="sctTableData_market"
                ></myTable>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- jrt_module -->
    <div class="jrt_module">
      <div class="jrt_content">
        <div class="left">
          <div class="jrt_btn">
            <span class="title">金融通</span>
            <div class="msg_total">
              <div class="finished">
                <p><span>{{indexPageInfo.stat.loancount}}</span>个</p>
                <p class="finished_floor2">贷款产品</p>
              </div>
              <div class="ready">
                <p><span>{{indexPageInfo.stat.loanfinance}}</span>次</p>
                <p class="ready_floor2">成功融资</p>
              </div>
            </div>
            <div class="moreBox">
              <button class="moreBtn">查看更多》</button>
            </div>
          </div>

        </div>
        <div class="last">

          <Swiper-banner
            currentIndex="12"
            :prevNext="false"
            :viewNum="1"
            bannerType="jrt"
            :bannerData="indexPageInfo.products"
          >
          </Swiper-banner>

          <div class="bottom">
            <button><span>银行贷款</span></button>
            <button><span>股权投资</span></button>
          </div>
        </div>
      </div>
    </div>

    <!-- ztt_module -->
    <div class="ztt_module">
      <div class="ztt_content">
        <div class="left">
          <div class="ztt_btn">
            <span class="title">载体通</span>
            <div class="msg_total">
              <div class="finished">
                <p><span>{{indexPageInfo.stat.apartmentbasecount}}</span>个</p>
                <p class="finished_floor2">入驻楼宇</p>
              </div>
              <div class="ready">
                <p><span>{{indexPageInfo.stat.apartmentmeetcount}}</span>个</p>
                <p class="ready_floor2">入驻会议室</p>
              </div>
            </div>
            <div class="moreBox">
              <button class="moreBtn">查看更多》</button>
            </div>
          </div>

        </div>
        <div class="last">
          <div class="top">
            <div class="btn">
              <span class="type_1">楼宇匹配</span>
            </div>
            <div class="btn">
              <span class="type_1">会议室匹配</span>
            </div>
            <div class="btn">
              <div class="type_2">
                <span>没有合适的？</span>
                <span>立即提交需求</span>
              </div>
            </div>
          </div>
          <div class="ztt_list">
            <!--            
              <li class="ztt_list_li">
                <div class="view"></div>
                <div class="title">成都新中泰国际大厦</div>
                <div class="area">总空置面积：2000㎡</div>
                <div class="amount">5000元/月/平方米</div>
              </li> -->
            <Swiper-banner
              :dataList="indexPageInfo.apartment"
              currentIndex="10"
              :viewNum="5"
              :prevNext="false"
              bannerType="ztt"
            ></Swiper-banner>

          </div>
        </div>
      </div>
    </div>

    <!-- zwt_module -->
    <div class="zwt_module">
      <div class="zwt_content">
        <div class="left">
          <div class="zwt_btn">
            <span class="title">政务通</span>
            <div class="msg_total">
              <div class="finished">
                <p><span>{{indexPageInfo.stat.govtong}}</span> 项</p>
                <p class="finished_floor2">办理政务</p>
              </div>
            </div>
            <div
              class="moreBox"
              style="margin-top: 54px"
            >
              <button class="moreBtn">查看更多》</button>
            </div>
          </div>

        </div>
        <div class="last">
          <div class="top">
            <div class="btn"></div>
            <div class="btn"></div>
          </div>
          <div class="bottom">
            <div class="btn"></div>
            <div class="btn"></div>
          </div>

        </div>
      </div>
    </div>

    <!-- 底部六百 -->
    <div class="bottomWhiteBg"></div>

    <div
      :class="!sideBarIsFixed?'isAbs sideBar_quickBtns':'isFixed sideBar_quickBtns'"
      ref="sideBar_quickBtns"
    >
      <div class="sideBar_title">快捷导航</div>
      <div class="sideBar_content">
        <div
          class="item"
          @click="goModules(0,'sqt')"
        >诉求通</div>
        <div
          class="item"
          @click="goModules(1,'zct')"
        >政策通</div>
        <div
          class="item"
          @click="goModules(2,'hdt')"
        >活动通</div>
        <div
          class="item"
          @click="goModules(3,'sct')"
        >市场通</div>
        <div
          class="item"
          @click="goModules(4,'jrt')"
        >金融通</div>
        <div
          class="item"
          @click="goModules(5,'ztt')"
        >载体通</div>
        <div
          class="item"
          @click="goModules(6,'zwt')"
        >政务通</div>
      </div>
      <div
        class="sidebar_back"
        @click="goBackTop"
      >
        <p>返回顶部</p>
      </div>
    </div>

    <div
      :class="!sideBarIsFixed?'isAbs sideBar_right':'isFixed sideBar_right'"
      ref="sideBar_right"
    >
      <div class="rightItem grzx"></div>
      <div class="rightItem message"></div>
      <div class="rightItem code_rd"></div>
      <div class="rightItem link"></div>
      <div class="rightItem phone"></div>
      <div class="rightItem question"></div>
    </div>

  </div>
</template>
<script>
import SwiperBanner from '@component/swiper/banner.vue'
import mySwiper from '@component/swiper/index.vue'
import { myMixin } from '@/mixin/index.js'
import myTable from '@component/table/index.vue'
import utils from '../utils/utils.js'
import { getIndexData, indexUser } from '@/utils/api/home.js'
import { toLogin, getUerInfo } from '@api/login.js'
export default {
  mixins: [myMixin],
  components: {
    myTable, mySwiper, SwiperBanner
  },
  name: 'ThreeTest',
  data () {
    return {
      utils: null,
      loginCode: '',
      cardLoginForm: {
        username: undefined,
        password: undefined,
        imgcode: undefined,
        source: 'policyknow'
      },
      cardLoginFormRules: {
        username: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        imgcode: [
          { required: true, message: '清输入验证码', trigger: 'blur' }
        ]
      },
      topNewsbanner: [
        { text: "aaa", bgImg: 'https://tests.winpow.com/vuestatic/img/home/home_swiper_1.jpg' },
      ],
      hdtBanner: [
        { text: "bbb", bgImg: 'https://tests.winpow.com/vuestatic/img/home/peixunswiper.jpg' },
      ],
      sideBarIsFixed: false,
      quickBtns: [],
      sct_showTable_type: 'city',
      sqtTableHeader: [
        { label: '诉求标题' },
        { label: '诉求时间' },
        { label: '办理状态' },
      ],
      sqtTableData: [
        // {
        //   title: '外地企业希望入驻高新产业园区',
        //   time: '2022-11-30 21:59:15',
        //   state: '已受理'
        // },
      ],
      zctTableData: [
        {
          title: '外地企业希望入驻高新产业园区',
          space: '',
          edit: '立即申报'
        },
        {
          title: '外地企业希望入驻高新产业园区',
          space: '',
          edit: '立即申报'
        },
        {
          title: '外地企业希望入驻高新产业园区',
          space: '',
          edit: '立即申报'
        },
        {
          title: '外地企业希望入驻高新产业园区',
          space: '',
          edit: '立即申报'
        },
        {
          title: '外地企业希望入驻高新产业园区',
          space: '',
          edit: '立即申报'
        },
      ],
      zctzTableData: [
        {
          title: '外地企业希望入驻高新产',
          space: '',
          edit: '查看详情'
        },
        {
          title: '外地企业希望入驻高新产',
          space: '',
          edit: '查看详情'
        },
        {
          title: '外地企业希望入驻高新产',
          space: '',
          edit: '查看详情'
        }
      ],
      sctTableData_market: [
        {
          title: '外地企业希望入驻高新产业园区',
          space: '',
          time: '2022-11-30 21:59:15'
        },
      ],
      sctTableData_city: [
        {
          title: '外地企业希望入驻高新产业园区',
          space: '',
          time: '2022-11-30 21:59:15'
        },
      ],
      quickMsgResultInfo: {},
      indexPageInfo: {},
      products_biaoqian: []
    }
  },
  computed: {
    quickRoutes () {
      return this.$router.options.routes.filter(item => item.path !== '/ztt' && item.path !== '/')
    },
    loginStatusComputed () {
      return this.$store.state.islogin;//这里返回vuex的state里的str数据
    },
  },
  mounted () {
    this.utils = utils
    this.quickBtns = this.quickRoutes
    let that = this
    window.addEventListener('scroll', function () {
      if (that.$refs.sideBar_quickBtns.getBoundingClientRect) {
        that.scrollTop(that.$refs.sideBar_quickBtns.getBoundingClientRect())
      }
    })
    this.viewLoginUserInfo()
    this.queryIndexData()
    this.getLoginCode()
  },
  methods: {
    // 渲染用户框信息
    viewLoginUserInfo () {
      indexUser().then(res => {
        if (res && res.code == 100 && res.data) {
          res.data.islogin === '10001' ? this.$store.commit('changeLoginStatus', true) : this.$store.commit('changeLoginStatus', false)
          utils.setlocStore('acator', res.data)
          this.quickMsgResultInfo = JSON.parse(JSON.stringify(res.data))
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 用户信息卡片得消息数量
    quickMsgResult (name) {
      let result
      switch (name) {
        case '诉求通':
          result = this.quickMsgResultInfo.appeal
          break;
        case '政策通':
          result = this.quickMsgResultInfo.policy
          break;
        case '活动通':
          result = this.quickMsgResultInfo.activity
          break;
        case '市场通':
          result = this.quickMsgResultInfo.bazaar
          break;
        case '金融通':
          result = this.quickMsgResultInfo.loancount
          break;
        case '政务通':
          result = this.quickMsgResultInfo.gov
          break;
        default:
          break;
      }
      return result
    },
    queryIndexData () {
      getIndexData().then(res => {
        if (res && res.code == 100 && res.data) {
          this.indexPageInfo = res.data
          this.topNewsbanner = this.candleNewsBanner(this.indexPageInfo.newspic)
          this.sqtTableData = this.candleSqtTableData(this.indexPageInfo.appeal)
          this.zctTableData = this.candleZctTableData(this.indexPageInfo.policybase)
          this.hdtBanner = this.candleHdtBanner(this.indexPageInfo.activity)
          this.sctTableData_city = this.candleSctData(this.indexPageInfo.bazrequirecity)
          this.sctTableData_market = this.candleSctData(this.indexPageInfo.bazrequiremarket)
          this.indexPageInfo.products.map(item => {
            item.biaoqian = item && item.biaoqian ? item.biaoqian.split(' ') : undefined
          })
          this.$store.commit('changeSearchKey', this.indexPageInfo.searchkey)
          //   this.hdtTableData = this.candleHdtTableData(this.indexPageInfo.activity)
        }
      })
    },
    candleSctData (data) {
      let obj = [];
      data.map(item => {
        obj.push({
          title: item.title,
          space: '',
          time: item.lurushijian,
          pkid: item.pkid,
        })
      })
      return obj
    },
    // 处理轮播图信息
    candleNewsBanner (data) {
      let prefix = this.imgUrl + '/policydata/getTitleimgs.html?title='
      let obj = [];
      data.map(item => {
        obj.push({
          text: item.title, bgImg: prefix + item.title
        })
      })
      return obj
    },
    candleHdtBanner (data) {
      let obj = [];
      data.map(item => {
        obj.push({
          text: item.actiname,
          bgImg: this.imgUrl + item.picture,
          pkid: item.pkid
        })
      })
      return obj
    },
    // 处理诉求通数据
    candleSqtTableData (data) {
      let obj = [];
      data.map(item => {
        obj.push({
          title: item.title,
          time: item.lurushijian,
          state: item.chstatus,
        })
      })
      return obj
    },
    candleZctTableData (data) {
      let obj = [];
      data.map(item => {
        obj.push({
          title: item.policyname,
          space: '',
          edit: '立即申报',
          pkid: item.pkid
        })
      })
      return obj
    },


    scrollTop (h) {
      utils.scrollTop((res) => {
        this.sideBarIsFixed = res.scrollH > 380 ? true : false;
      })
    },
    goBackTop () {
      this.$nextTick(() => {
        utils.gobackTop()
      })
    },
    goModules (index, name) {
      // 用 class="instance_title" 添加锚点

      let total = document.querySelector(`.${name}_module`).offsetTop;
      let distance = document.documentElement.scrollTop || document.body.scrollTop;
      // 平滑滚动，时长500ms，每10ms一跳，共50跳
      let step = total / 50;
      if (total > distance) {
        smoothDown();
      } else {
        let newTotal = distance - total;
        step = newTotal / 50;
        smoothUp();
      }
      function smoothDown () {
        if (distance < total) {
          distance += step;
          document.body.scrollTop = distance;
          document.documentElement.scrollTop = distance;
          setTimeout(smoothDown, 10);
        } else {
          document.body.scrollTop = total;
          document.documentElement.scrollTop = total;
        }
      }
      function smoothUp () {
        if (distance > total) {
          distance -= step;
          document.body.scrollTop = distance;
          document.documentElement.scrollTop = distance;
          setTimeout(smoothUp, 10);
        } else {
          document.body.scrollTop = total;
          document.documentElement.scrollTop = total;
        }
      }
    },

    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          toLogin(this.cardLoginForm).then(res => {
            console.log(res)
            if (res && res.code == 100) {
              this.$message.success('登录成功')
              this.$store.commit('changeLoginStatus', true)
              this.viewLoginUserInfo()
            } else {
              this.getLoginCode()
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 获取验证码
    getLoginCode () {
      this.loginCode = `${import.meta.env.VITE_BASEURL}/policycommon/ValidateImage.html?radom=` + Math.random()
    },
    // 注册
    toReg () {
      this.$EventBus.$emit("register")
    },
  },
}

</script>
<style lang="scss" scoped>
@import '@/assets/css/home.scss';


.zct_module::v-deep {
  .right {
    .tbody_item {
      height: 50px;
      line-height: 50px;
    }
    .info {
      .info_header {
        padding: 20px 20px 0;
      }
    }
  }
  .last {
    .tbody_item {
      height: 30px;
      line-height: 30px;
      span {
        font-size: 14px;
      }
    }
    .tbody_item:nth-child(1) {
      flex: 5;
    }
    .tbody_item:nth-child(2) {
      flex: 0;
    }
    .tbody_item:nth-child(3) {
      flex: 2;
    }
    .bottom {
      .info {
        .info_header {
          padding: 20px 20px 0;
        }
      }
    }
  }
}

.sct_module::v-deep {
  .right {
    .tbody_item_row {
      .tbody_item:nth-child(1) {
        width: 370px;
        flex: none;
      }
    }
  }
  .last {
    .tbody_item {
      height: 30px;
      line-height: 30px;
      span {
        font-size: 14px;
        width: 100%;
      }

      .tbody_item:nth-child(1) {
        flex: 5;
      }
      .tbody_item:nth-child(2) {
        flex: 0;
      }
      .tbody_item:nth-child(3) {
        flex: 2;
      }
    }

    .bottom {
      .info {
        .info_header {
          padding: 20px 20px 0;
        }
      }
    }
  }
}
</style>
